<template>
  <view class="details" :class="[showGoodsShare ? 'no-scroll' : '']">
    <template v-if="data">
      <!-- #ifndef MP-TOUTIAO -->
      <singleHeader> </singleHeader>
      <!-- #endif -->

      <detailsSwiper :swipers="data.pic_list"></detailsSwiper>

      <detailsContent
        :data="{
          ...data,
          id,
        }"
        :videoId="id"
        :userId="userId"
        @follow="follow"
      ></detailsContent>

      <detailsComment
        :items="commentList"
        :count="count"
        :userId="userId"
        @comment="openPop"
      ></detailsComment>

      <detailsFooter
        :data="data"
        :placeholder="placeholder"
        @confirm="confirm"
        @setParentId="openPop"
        @changeStatus="changeStatus"
        ref="footer"
      ></detailsFooter>

      <detailsShare
        v-if="showGoodsShare"
        :topic_id="id"
        @closeShare="showGoodsShare = false"
      ></detailsShare>
    </template>
    <transitionPage></transitionPage>
  </view>
</template>

<script>
import videoClassify from "@/api/videoClassify";

import singleHeader from "@/components/diySystemPage/components/singleHeader/index";
import detailsSwiper from "../components/details-swiper";
import detailsContent from "../components/details-content";
import detailsComment from "../components/details-comment.vue";
import detailsFooter from "../components/details-footer";
import detailsShare from "../components/details-share";

export default {
  components: {
    singleHeader,
    detailsSwiper,
    detailsContent,
    detailsComment,
    detailsFooter,
    detailsShare,
  },

  data() {
    return {
      data: null,
      commentList: [],
      page: 1,
      count: 0,
      limit: 20,
      isEnd: false,
      id: undefined,
      userId: undefined,
      avatar_url: "",
      nickname: "",
      parent_id: 0,
      top_parent_id: 0,
      placeholder: "",

      showGoodsShare: false,
    };
  },

  computed: {},

  onLoad(opi) {
    if (opi && opi.id) {
      this.id = opi.id;
    }
    if (opi?.scene) {
      let scene = decodeURIComponent(opi.scene);
      let params = this.$utils.sceneDecode(scene);
      this.id = params.vid;
    }
    this.getData();
    this.getCommentData();

    try {
      const userInfo = uni.getStorageSync("userInfo");
      if (userInfo) {
        this.userId = userInfo.id;
        this.avatar_url = userInfoavatar_url;
        this.nickname = userInfo.nickname;
      }
    } catch (e) {}
  },

  methods: {
    getData() {
      videoClassify
        .videoGoodsDetail({
          id: this.id,
        })
        .then((res) => {
          if (res.code === 0) {
            this.data = res.data;

            if (!res.data.douyin_url) return;

            uni.setClipboardData({
              data: res.data.douyin_url,
              success() {
                uni.hideToast();
              },
            });
          }
        });
    },

    getCommentData() {
      let { page, limit, id, commentList: oldList } = this;

      videoClassify
        .videoGoodsCommentList({
          vl_id: id,
          page,
          limit,
        })
        .then((res) => {
          if (res.code === 0) {
            let { list, row_count } = res.data;
            this.count = parseInt(row_count);
            if (list.length) {
              oldList.push(...list);
              this.page++;
            }

            if (oldList.length >= this.count) {
              this.isEnd = true;
            }
          }
        });
    },

    openPop(item, id) {
      let parent_id = 0,
        placeholder = "",
        top_parent_id = 0;

      if (item !== 0) {
        parent_id = item.id;
        placeholder = `回复 @${item.name}`;
        top_parent_id = id;
      }

      this.parent_id = parent_id;
      this.placeholder = placeholder;
      this.top_parent_id = top_parent_id;
      this.$refs.footer.showPopup = true;
    },

    // 提交评论
    confirm(content) {
      let {
        parent_id,
        // avatar_url,
        // nickname,
        id,
        top_parent_id,
      } = this;

      uni.showLoading({
        title: this.$t("home.loading"),
      });

      videoClassify
        .videoGoodsSubmitComment({
          parent_id,
          content,
          vl_id: id,
          top_parent_id,
        })
        .then((res) => {
          uni.hideLoading();

          if (res.code === 0) {
            // if (parent_id === 0) {
            // commentList.push({
            //   name: nickname,
            //   comment: content,
            //   avatar: avatar_url,
            //   time: "刚刚",
            //   is_like: 0,
            //   like_count:'0',
            // });
            // }

            this.clearPage();

            this.$utils.toast(res.mes, "success");
            let { footer } = this.$refs;
            footer.showPopup = false;
            footer.content = "";
            this.parent_id = 0;
            this.top_parent_id = 0;
            this.placeholder = "";
          }
        })
        .catch(() => {
          uni.hideLoading();
        });
    },

    // 关注和取消关注
    follow() {
      let { is_focus, user_id } = this.data;

      if (is_focus === 0) {
        videoClassify
          .videoGoodsFocus(
            {
              focus_user_id: user_id,
            },
            false
          )
          .then((res) => {
            if (res.code === 0) {
              this.$set(this.data, "is_focus", 1);
              this.$utils.toast(res.msg);
            }
          });
      } else {
        videoClassify
          .videoGoodsCancelFocus(
            {
              user_id,
            },
            false
          )
          .then((res) => {
            if (res.code === 0) {
              this.$set(this.data, "is_focus", 0);
              this.$utils.toast(res.msg);
            }
          });
      }
    },

    // 转发点赞收藏
    changeStatus(type, status, numEl) {
      let isCancel = false,
        { data, id: vl_id } = this;

      if ((type === "is_like" || type === "is_collect") && data[type] === 1) {
        isCancel = true;
      } else if (type === "trans_count") {
        this.showGoodsShare = true;
      }

      if (!isCancel) {
        videoClassify
          .videoGoodsVote({
            vl_id,
            type: status,
          })
          .then((res) => {
            if (res.code === 0) {
              this.$u.toast(res.msg);
              if (numEl) {
                this.$nextTick(() => {
                  this.$set(data, type, 1);
                  this.$set(data, numEl, parseInt(data[numEl]) + 1);
                });
              } else {
                this.$nextTick(() => {
                  this.$set(data, type, parseInt(data[type]) + 1);
                });
              }
            }
          });
        return;
      }

      videoClassify
        .videoGoodsCancelVote({
          vl_id,
          type: status,
        })
        .then((res) => {
          if (res.code === 0) {
            this.$nextTick(() => {
              this.$set(data, type, 0);
              this.$set(data, numEl, parseInt(data[numEl]) - 1);
            });
          }
        });
    },

    clearPage() {
      this.page = 1;
      this.isEnd = false;
      this.count = 0;
      this.commentList = [];

      this.getCommentData();
    },
  },

  // 获取更多评论
  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getCommentData();
  },

  onShareTimeline() {
    let { data } = this;

    return {
      title: data.title,
      path: "",
      imageUrl: data.cover_pic,
    };
  },
};
</script>

<style lang="scss" scoped>
.details {
  position: relative;
  padding-bottom: 180rpx;
}

.no-scroll {
  overflow: hidden;
  height: 100vh;
}
</style>
